<template>
  <div ref="marketChart" class="marketChart"></div>
</template>
<script setup>


import { UploadOutlined } from "@ant-design/icons-vue"
import { chartOption } from "./chartOption"
import { create } from "@/utils/common"
import * as echarts from "echarts"
import { getAllDate } from "@/utils/common"

import moment from "moment"
const $api = inject("$api")
const emits = defineEmits(["update:getMarketLoadinfo"])
const props = defineProps({
  MarketLoadinfoList: {
    type: Object,
    default: () => {},
  },
  handleEmptyTime: {
    type: Function,
  },
  handleLine: {
    type: Function,
  },
  intervalPoints: {
    type: Number,
    default: 24,
  },
  dateRange: {
    type: Array,
    default: () => [],
  },
  dataType: {
    type: Number,
    default: 1,
  },
})
let marketChart = ref()
const intervalPoints = ref(null)
const MarketLoadinfoList = ref({})
const dateRange = ref([])
const dataType = ref(1)
watch(
  () => [
    props.MarketLoadinfoList,
    props.intervalPoints,
    props.dateRange,
    props.dataType,
  ],
  async ([val, val2, val3, val4]) => {
    /* marketLoadinfoList.value = props.handleEmptyTime(
      JSON.parse(JSON.stringify(val))
    ) */
    if (val && val2 && val3 && val4) {
      intervalPoints.value = val2
      MarketLoadinfoList.value = JSON.parse(JSON.stringify(val))
      dateRange.value = val3
      dataType.value = val4
      props.handleEmptyTime(
        MarketLoadinfoList.value.alist,
        "loadHourList",
        "loadMinutesList"
      )
      props.handleEmptyTime(
        MarketLoadinfoList.value.blist,
        "loadHourList",
        "loadMinutesList"
      )
      props.handleEmptyTime(
        MarketLoadinfoList.value.loadList,
        "loadHourList",
        "loadMinutesList"
      )
      props.handleEmptyTime(
        MarketLoadinfoList.value.dayAheadForeList,
        "loadHourList",
        "loadMinutesList"
      )
      props.handleEmptyTime(
        MarketLoadinfoList.value.localList,
        "loadHourList",
        "loadMinutesList"
      )
      props.handleEmptyTime(
        MarketLoadinfoList.value.westList,
        "loadHourList",
        "loadMinutesList"
      )
      props.handleEmptyTime(
        MarketLoadinfoList.value.yueList,
        "loadHourList",
        "loadMinutesList"
      )
      await nextTick()
      if (marketChart.value) {
        MarketLine()
      }
    }
  },
  {
    deep: true,
    immediate: true,
  }
)

//市场供需情况图表
let chartObj = null
const seriesNameList = ref([])
let dataList = ref([])
const MarketLine = async () => {
  dataList.value = getAllDate(dateRange.value[0], dateRange.value[1])
  switch (intervalPoints.value) {
    case 24:
      chartOption.xAxis.data = create(dataList.value, 60)
      chartOption.series[0].data = props.handleLine(
        MarketLoadinfoList.value.dayAheadForeList,
        "loadHourList"
      )
      chartOption.series[1].data = props.handleLine(
        MarketLoadinfoList.value.loadList,
        "loadHourList"
      )
      chartOption.series[2].data = props.handleLine(
        MarketLoadinfoList.value.blist,
        "loadHourList"
      )
      chartOption.series[3].data = props.handleLine(
        MarketLoadinfoList.value.westList,
        "loadHourList"
      )
      chartOption.series[4].data = props.handleLine(
        MarketLoadinfoList.value.alist,
        "loadHourList"
      )
      chartOption.series[5].data = props.handleLine(
        MarketLoadinfoList.value.localList,
        "loadHourList"
      )
      chartOption.series[6].data = props.handleLine(
        MarketLoadinfoList.value.yueList,
        "loadHourList"
      )

      break
    case 96:
      chartOption.xAxis.data = create(dataList.value, 15)
      chartOption.series[0].data = props.handleLine(
        MarketLoadinfoList.value.dayAheadForeList,
        "loadMinutesList"
      )
      chartOption.series[1].data = props.handleLine(
        MarketLoadinfoList.value.loadList,
        "loadMinutesList"
      )
      chartOption.series[2].data = props.handleLine(
        MarketLoadinfoList.value.blist,
        "loadMinutesList"
      )
      chartOption.series[3].data = props.handleLine(
        MarketLoadinfoList.value.westList,
        "loadMinutesList"
      )
      chartOption.series[4].data = props.handleLine(
        MarketLoadinfoList.value.alist,
        "loadMinutesList"
      )
      chartOption.series[5].data = props.handleLine(
        MarketLoadinfoList.value.localList,
        "loadMinutesList"
      )
      chartOption.series[6].data = props.handleLine(
        MarketLoadinfoList.value.yueList,
        "loadMinutesList"
      )
      break
  }
  chartOption.series[7].markLine.data = []
  let difference = moment(dateRange.value[1]).diff(
    moment(dateRange.value[0]),
    "day"
  )
  for (let i = 0; i <= difference; i++) {
    if (i !== 0) {
      chartOption.series[7].markLine.data.push({
        xAxis: (chartOption.xAxis.data.length / (difference + 1)) * i,
      })
    }
  }
  if (dataType.value === 2) {
    seriesNameList.value = [
      "",
      "统调负荷",
      "B类竞价空间",
      "西电东送出力",
      "A类电源出力",
      "地方电源出力",
      "粤港联络线",
    ]
  } else {
    seriesNameList.value = [
      "统调负荷预测",
      "统调负荷",
      "B类竞价空间",
      "西电东送出力",
      "A类电源出力",
      "地方电源出力",
      "粤港联络线",
    ]
  }
  chartOption.series.map((item, index) => {
    if (!item.markLine) {
      if (dataType.value === 1) {
        item.name = `${seriesNameList.value[index]}-日前`
      } else {
        item.name = seriesNameList.value[index]
          ? `${seriesNameList.value[index]}-实时`
          : ""
      }
    }
    if (index < 4) {
      chartOption.legend.selected[item.name] = true
    } else {
      chartOption.legend.selected[item.name] = false
    }
    return item
  })
  var chart = echarts.init(marketChart.value)
  chartObj = chart
  chart.resize()
  chart.clear()
  chart.setOption(chartOption)
}
const updateChart = () => {
  emits("update:getMarketLoadinfo", dataType.value)
}
onMounted(async () => {})
onBeforeUnmount(() => {
  if (chartObj) {
    chartObj.dispose()
  }
})
</script>
<style lang="less" scoped>
.marketChart {
  height: 500px;
  width: 100%;
  //transform: rotate3d(1, 0, 0, 35deg);
}
</style>
